<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <nz-spin class="cil__base-block--form" [nzSpinning]="isLoading">
    <form [formGroup]="form" nz-form>
      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>{{'TRADE.STATS.TOTAL.AMT' | i18n}}</nz-form-label>
            <nz-form-control>{{totalAmt | amtFormat:currency | async}}</nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="8">
          <nz-form-item>
            <nz-form-label>{{'OPERATION.DEPOSIT.RETURN_TYPE' | i18n}}</nz-form-label>
            <nz-form-control>
              <nz-radio-group formControlName="returnType" name="returnType">
                <label nz-radio [nzValue]="returnTypeByRate">{{'OPERATION.DEPOSIT.RETURN_TYPE.BY_RATE' | i18n}}</label>
                <label nz-radio [nzValue]="returnTypeByAmt">{{'OPERATION.DEPOSIT.RETURN_TYPE.BY_AMT' | i18n}}</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="8" *ngIf="isRateAvailable">
          <nz-form-item>
            <nz-form-label>{{'OPERATION.DEPOSIT.RETURN_RATE' | i18n}}</nz-form-label>
            <nz-form-control>
              <nz-slider formControlName="rate" name="rate" [nzMin]='1' [nzMarks]="rateMarks"
                [nzTooltipVisible]="'always'"></nz-slider>
              <nz-form-explain>
                <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('rate'), name:'rate'}">
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col [nzSpan]="8">
          <nz-form-item>
            <nz-form-label>{{'OPERATION.DEPOSIT.RETURN_AMT' | i18n}}</nz-form-label>
            <nz-form-control nzHasFeedback="true">
              <nz-input-group [nzAddOnAfter]="currency" style="width: 100%;">
                <nz-input-number formControlName="depositAmt" name="depositAmt" [nzMin]="1"
                  [nzMax]="amtScale(currency, totalAmt) | async"
                  [nzStep]="1" [nzPrecision]="depositAmtPrecision" style="width: 100%;"></nz-input-number>
              </nz-input-group>
              <nz-form-explain>
                <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('depositAmt'), name:'depositAmt'}">
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="16">
          <nz-form-item>
            <nz-form-label>{{'GENERAL.INFO.REMARK' | i18n}}</nz-form-label>
            <nz-form-control nzHasFeedback="true">
              <input formControlName="remark" name="remark" nz-input />
              <nz-form-explain>
                <ng-container *ngTemplateOutlet="errorTpl;context:{control:form.get('remark'), name:'remark'}">
                </ng-container>
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </nz-spin>

</div>

<ng-template #errorTpl let-control="control" let-name="name">
  <ng-container *ngIf="control.dirty">
    <ng-container *ngIf="control.hasError('required'); else second">{{ errorTips[name]?.required }}</ng-container>
    <ng-template #second>
      <ng-container *ngIf="control.hasError('maxlength'); else third">{{ errorTips[name]?.maxlength }}</ng-container>
    </ng-template>
    <ng-template #third>
      <ng-container *ngIf="control.hasError('min'); else fourth">{{ errorTips[name]?.min }}</ng-container>
    </ng-template>
    <ng-template #fourth>
      <ng-container *ngIf="control.hasError('max')">{{ errorTips[name]?.max }}</ng-container>
    </ng-template>
  </ng-container>
</ng-template>